<template>
	<div>
		<!--开个价弹出框-->
		<van-popup
		  :close-on-click-overlay="false"	
		  @click-overlay="cancle"	
		  v-model="showMoneyPopup"
		  position="bottom"
		  :style="{ height: 'auto' }"
		>     
		
	        <div class="cellGroup" @click='changeActiveInput(3)'>
	        	<span class="cellLabel">数量</span>
	        	<span class="cellValue" style="align-self: center;">
	        		<span class="input">{{goodsCount}}</span>
	        		<span class="animation" v-if="activeInput==3&&canInput1"></span>
	        	</span> 	        	
	        	
	        	<div style="margin-right: 10px;" @click="changeLimited">
                    <img src="../../../../static/img/lanhu/41.png" alt="" class="checkBox" v-if="!limited"/>
                    <img src="../../../../static/img/lanhu/42.png" alt="" class="checkBox" v-else/>
                	<span style="color: #999;">不限量</span>	               		                
	        	</div>

	        	
	        </div>
	        
	        <div class="cellGroup" @click='changeActiveInput(4)'>
	        	<span class="cellLabel">每人限购</span>
	        	<span class="cellValue" style="align-self: flex-end;">
	        		<span class="input">{{limitCount}}</span>
	        		<span class="animation" v-if="activeInput==4&&canInput2"></span>
	        	</span> 	        	
	        	
	        	<div style="margin-right: 10px;display: flex;align-items: center;">
                   <van-switch v-model="checked"  size="24px" active-color="#FFD630" @change="changeChecked"/>	
                   <!--<switchCom v-model="checked" text="启用|禁用"></switchCom>-->
                   <span style="margin-left: 10px;color: #666;" v-if="checked">启用</span>
                   <span style="margin-left: 10px;color: #999;" v-if="!checked">未启用</span>
	        	</div>
	        	
	        	
	        </div>	        

	        
	        
			<div clas="keyboard">
	           <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
	           	  <tr>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(1)">1</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(2)">2</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(3)">3</div>
	           	  	</td>
	           	  	<td rowspan="2" @click="clearPrice">
	           	  		<div class="cc" >
	           	  			<img src="../../../../static/img/lanhu/39.png" alt="" style="width: 25px;height: 19px;"/>
	           	  		</div>
	           	  	</td>
	           	  </tr>
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(4)">4</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(5)">5</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(6)">6</div></td>
	           	  </tr>  
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(7)">7</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(8)">8</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(9)">9</div></td>
	           	  	<td rowspan="2" style="background: #fceb22;" @click="confirmPrice()">
	           	  		<div class="cc" style="font-size: 18px;font-weight: bold;">确定</div>
	           	  	</td>
	           	  </tr> 
	           	  <tr>
	           	  	<!--<td class="w25"><div class="cc blod" @click="changePrice('.')">.</div></td>-->
	           	  	<td class="w25" colspan="2"><div class="cc blod" @click="changePrice(0)">0</div></td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="cancle">
	           	  		    <img src="../../../../static/img/lanhu/40.png" alt=""  style="width: 16px;height: 9px;"/>
	           	  		</div>
	           	  	</td>           	  	
	           	  </tr>
	           </table>		
			</div>	
		</van-popup>
	</div>	
</template>

<script>
import '@/assets/reset/release.css'	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	 checked:false,   // 用于绑定是否开启限购 
         activeInput:'3', // 用于绑定现在作用于哪个输入框
       	 goodsCount:'1',      // 用于绑定商品数量
       	 showMoneyPopup:false,
       	 limited:false,     // 是否限量
       	 canInput1:true,    // 数量是否可输入
       	 limitCount:'',     // 用于绑定限购数量
       	 canInput2:false    // 限购是否可输入
       }
	},
	props:['comPrice'],	
	methods: {
	  init(goodsCount,limitCount){
	  	if(limitCount>=0){
	  		this.limitCount=limitCount.toString()
	  		this.checked=true
	  		this.canInput2=true
	  	}
	  	if(goodsCount>=0){
	  		this.goodsCount=goodsCount.toString()
	  	}else{
	  		this.canInput1=false
	  		this.goodsCount="不限量"
	  		this.limited=true
	  	}
	  },
	  show(){
	  	this.showMoneyPopup=true
	  },
	  // 关闭弹框	
	  cancle(){
	  	 this.showMoneyPopup=false
	  },
	  // 选择开启/关闭 不限量
	  changeLimited(){
	  	// 限量
	  	if(this.limited){
	  		this.limited=false
	  		this.goodsCount="1"
	  		this.canInput1=true
	  	}
	  	// 不限量
	  	else{
	  		this.limited=true
	  		this.goodsCount="不限量"
	  		this.canInput1=false
	  	}
	  },
	  // 是否开启/关闭限购
	  changeChecked(res){
	  	if(res){
	  		this.canInput2=true
	  	}else{
	  		this.limitCount=''
	  		this.canInput2=false
	  	}
	  },
      // 改变光标
      changeActiveInput(num){      	
      	this.activeInput=num      	
      	if(this.money){
      		this.money=Number(this.money).toFixed(2)
      	}       	
      },		
	  // 清除按钮点击事件
	  clearPrice(){
	  	let str=this.activeInput.toString()
		switch(str) {
		     case '3':	
			  	if(this.goodsCount=='不限量'){
			  		return false
			  	}else{
			  		this.goodsCount=''
			  	}
		        break;	
		     case '4':		     
		        this.limitCount=''
		        break;			        
		}
	  },
	  // 点击数字修改价格(数字)
	  changePrice(num){
        let str=this.activeInput.toString()
		switch(str) {
		     case '3':		        
		        if(this.canInput1){
		        	if(num=='0'&&this.goodsCount=='0'){
		        		return false
		        	}
			        if(num=='.'){
			          if(!this.goodsCount||this.goodsCount.indexOf('.')>=0){
			          	return false
			          }
			        }		     
			        this.goodsCount+=num		        	
		        }else{
		        	return false
		        }
		        break;	
		     case '4':
		        if(this.canInput2){
		        	if(num=='0'&&this.limitCount=='0'){
		        		return false
		        	}
			        if(num=='.'){
			          if(!this.limitCount||this.limitCount.indexOf('.')>=0){
			          	return false
			          }
			        }		     
			        this.limitCount+=num		        	
		        }else{
		        	return false
		        }
		        break;		        
		} 	  		  	
	  },
	  // 确认数量
      confirmPrice(){ 
      	if(this.goodsCount==0){
      		this.$toast('数量不能为0');
      		return false      		
      	}     	
      	if(this.checked&&!this.limitCount){
      		this.$toast('请输入限购数量');
      		return false        		
      	}      	      	
      	if(this.checked&&this.limitCount&&this.goodsCount){
      		if(Number(this.limitCount)>Number(this.goodsCount)){
	      		this.$toast('限购数量不能大于商品数量');
	      		return false         			
      		}
      	}      	      	      	
      	if(!this.goodsCount){
      		this.$toast('请确认数量大于等于1');
      		return false      		
      	}      	      	
      	let goodsCount,limitCount
      	if(this.goodsCount=="不限量"){
      		goodsCount=-1
      	}else{
      		goodsCount=this.goodsCount
      	}
 	    if(!this.limitCount){
 	    	limitCount=-1
 	    }else{
 	    	limitCount=this.limitCount
 	    }
      	this.showMoneyPopup=false
	    this.$emit('confirmNumber',goodsCount,limitCount)   
      }
      
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="">
*{box-sizing: border-box;}
.cc{display: flex;align-items: center;justify-content: center;}	
table{width: 100%;border:1px solid #ccc}
td{ border: 1px solid #f0f0f0;}
.w25{width: 25%;height: 60px;}
.w50{width: 50%;height: 60px;}
.blod{font-weight: bold;font-size: 18px;}
.animation{display: block;vertical-align:-1px;
width:1px;height:12px;animation: blink 1s infinite steps(1, start)}  
@keyframes blink {
 0%{
   background-color: white;
 }
 50% {
   background-color: black;
 }
 100% {
   background-color: white;
 }
 }
.cellGroup{padding: 15px 10px;display: flex;align-items: center;height: 48px;}
.cellGroup>span{display: flex;}
.cellLabel{width: 70px;font-size: 14px;color: #333;}
.cellValue{flex: 1;position: relative;display: flex;align-items: center;height: 18px;}
.placehode{position: absolute;left: 0;color: #999;font-size: 14px;} 
.input{font-size: 14px;}
.tips{color: #ff8080;padding-top: 3px;}
.tips_icon{vertical-align: -3px;margin-left: 10px;font-size: 16px;}
.checkBox{width: 14px;height: 14px;vertical-align: middle;margin-right: 8px;}
</style>